<template>
  <view class="userinfo">
    <!--头像 + 背景-->
    <view class="user-section">
      <view class="avatar"> 头像 </view>
      <image class="bg" :src="userBg"></image>
      <!--#ifdef H5-->
      <!--h5直接上传头像-->
      <view class="portrait-box flex" @tap="uploadImage">
        <image class="portrait" :src="profileInfo.avatarUrl || headImg"></image>
        <view class="right-row"> </view>
      </view>
      <!-- #endif -->
      <!--#ifndef H5-->
      <!--非h5裁剪头像上传-->
      <view class="portrait-box">
        <avatar
          canRotate="false"
          selWidth="320upx"
          selHeight="320upx"
          @upload="handleUploadFile"
          :avatarSrc="profileInfo.avatarUrl || headImg"
          avatarStyle="width: 90upx; height: 90upx; border-radius: 100%;"
        >
        </avatar>
      </view>
      <!-- #endif -->
    </view>
    <view class="input-item" @tap="updateName">
      <view>
        <text class="tit">昵称</text>
      </view>
      <view class="flex">
        <text class="tit">{{ profileInfo.nickName }}</text>
        <view class="right-row"> </view>
      </view>
    </view>
    <view class="input-item">
      <text class="tit">工号</text>
      <text class="tit">{{
        profileInfo.number ? profileInfo.number : "11"
      }}</text>
    </view>
    <view class="input-item">
      <view>
        <text class="tit">绑定手机号</text>
      </view>
      <view class="flex" v-if="profileInfo.phone">
        <text class="tit weibangding"> 已绑定 </text>
        <view class="right-row"> </view>
      </view>
      <view class="flex" v-else @tap="navTo('/pages/set/invoice/list')">
        <text class="tit weibangding"> 未绑定 </text>
        <view class="right-row"> </view>
      </view>
    </view>
    <view
      class="input-item"
      @tap="navTo('/pages/user/userinfo/unitinformation', profileInfo.id)"
    >
      <view>
        <text class="tit">单位信息</text>
      </view>
      <view class="flex">
        <text class="tit"></text>
        <view class="right-row"> </view>
      </view>
    </view>
    <view class="spli-border"> </view>
    <view class="btn-wrapper" @tap="toLogout"> 退出登录 </view>
    <!--加载动画-->
    <rfLoading isFullScreen :active="loading"></rfLoading>

    <!--进度条加载-->
    <rf-load-progress
      :height="CustomBar"
      :progress="loadProgress"
    ></rf-load-progress>
    <uniModel
      :userFeedbackHidden="userFeedbackHidden"
      @confirm="FeedbackHidden"
      @cancle="cancle"
    ></uniModel>
  </view>
</template>

<script>
import uniModel from "@/pages/user/userinfo/uni-model.vue";
import { memberInfo, memberUpdate, uploadImage } from "@/api/userInfo";
import { logout } from "@/api/login";
import avatar from "@/components/rf-avatar/rf-avatar";
import moment from "@/common/moment";
export default {
  components: { avatar, uniModel },
  data() {
    return {
      loadProgress: 0,
      CustomBar: this.CustomBar,
      profileInfo: {
        head_portrait: "",
        nickName: "",
      },
      userFeedbackHidden: true,
      genders: [
        {
          value: "0",
          name: "未知",
        },
        {
          value: "1",
          name: "男",
        },
        {
          value: "2",
          name: "女",
        },
      ],
      date: moment().format("YYYY-MM-DD"),
      token: null,
      loading: true,
      headImg: this.$mAssetsPath.headImg,
      userBg: this.$mAssetsPath.userBg,
      btnLoading: false,
    };
  },
  onLoad() {
    this.initData();
  },
  methods: {
    FeedbackHidden(show, nickName) {
      this.userFeedbackHidden = show;
      this.profileInfo.nickName = nickName;
      this.handleUpdateInfo();
    },
    cancle(show) {
      this.userFeedbackHidden = show;
    },
    // 通用跳转
    navTo(route, id) {
      this.$mRouter.push({ route: route, query: { id: id } });
    },
    // 上传头像
    uploadImage() {
      // 从相册选择图片
      const _this = this;
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album"],
        success: function (res) {
          _this.handleUploadFile(res.tempFilePaths);
        },
      });
    },
    // 上传头像
    handleUploadFile(data) {
      const _this = this;
      const filePath = data.path || data[0];
      _this.$http
        .upload(uploadImage, {
          filePath,
          name: "file",
        })
        .then((r) => {
          console.log(r);
          _this.profileInfo.avatarUrl = r.data;
          _this.handleUpdateInfo(_this.profileInfo);
        });
    },
    // 数据初始化
    initData() {
      this.token = uni.getStorageSync("token") || undefined;
      this.getMemberInfo();
    },
    // 获取用户信息
    async getMemberInfo() {
      await this.$http
        .get(memberInfo)
        .then((r) => {
          console.log(r);
          this.loading = false;
          this.profileInfo = r.data;
          this.profileInfo.nickName = r.data.nickName || "游客登录";
        })
        .catch(() => {
          this.loading = false;
        });
    },
    updateName() {
      this.userFeedbackHidden = !this.userFeedbackHidden;
    },
    // 退出登录
    toLogout() {
      uni.showModal({
        content: "确定要退出登录么",
        success: (e) => {
          if (e.confirm) {
            this.$http.get(`${logout}`).then(() => {
              this.$mStore.commit("logout");
            });
          }
        },
      });
    },
    // 更新用户信息
    async handleUpdateInfo() {
      this.btnLoading = true;
      this.loadProgress = this.loadProgress + 6;
      const timer = setInterval(() => {
        this.loadProgress = this.loadProgress + 6;
      }, 50);
      await this.$http
        .put(memberUpdate, {
          nickName: this.profileInfo.nickName,
          avatarUrl: this.profileInfo.avatarUrl
            ? this.profileInfo.avatarUrl
            : "1.png",
        })
        .then(() => {
          clearInterval(timer);
          this.loadProgress = 0;
          this.$mHelper.toast("恭喜您, 资料修改成功!");
          setTimeout(() => {
            this.$mRouter.back();
          }, 1 * 1000);
        })
        .catch(() => {
          this.btnLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f9f9f9;
}

.userinfo {
  border-top: 1upx solid #eeeeee;
  background: #ffffff;
  .right-row {
    width: 18upx;
    height: 18upx;
    border-top: 2upx solid #999999;
    border-right: 2upx solid #999999;
    transform: rotate(45deg);
  }
  .weibangding {
    font-size: 28upx;
    color: #999;
    font-weight: 500;
  }
  .user-section {
    display: flex;
    border-bottom: 1upx solid #eeeeee;
    font-weight: 500;
    align-items: center;
    color: #333333;
    justify-content: space-between;
    height: 150upx;
    line-height: 150upx;
    margin: 0 0 0 30upx;
    padding-right: 30upx;
    font-size: 28upx;
    overflow: hidden;
    position: relative;
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 90upx;
    }

    .portrait-box {
      clear: both;
      z-index: 2;
    }

    .portrait {
      position: relative;
      width: 90upx;
      height: 90upx;
      border-radius: 50%;
      border: 6upx solid #fff;
    }

    .yticon {
      position: absolute;
      line-height: 1;
      z-index: 5;
      font-size: 48upx;
      color: #fff;
      padding: 4upx 6upx;
      border-radius: 6upx;
      background: rgba(0, 0, 0, 0.4);
    }

    .pt-upload-btn {
      right: 0;
      bottom: 10upx;
    }

    .bg-upload-btn {
      right: 20upx;
      bottom: 16upx;
    }
  }
  .input-item {
    display: flex;
    border-bottom: 1upx solid #eeeeee;
    align-items: center;
    justify-content: space-between;
    margin: 0 30upx 0 30upx;
    height: 100upx;
    font-size: 28upx;
    font-weight: 500;
    line-height: 100upx;
    color: #333333;
    &:last-child {
      margin-bottom: 0;
    }
    .tit {
      padding-right: 10upx;
    }
  }

  .input-items {
    display: flex;
    border-bottom: 1upx solid #eeeeee;
    align-items: center;
    justify-content: flex-start;
    margin: 0 30upx 0 30upx;
    height: 100upx;
    font-size: 28upx;
    font-weight: 500;
    line-height: 100upx;
    color: #333333;
    &:last-child {
      margin-bottom: 0;
    }
    .tit {
      padding-right: 50upx;
    }
  }
  .spli-border {
    height: 18upx;
    background: #f9f9f9;
  }
  .btn-wrapper {
    height: 90upx;
    line-height: 90upx;
    text-align: center;
    font-size: 28upx;
    color: #326130;
    font-weight: 500;
  }
}
</style>
